<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100% " @selection-change="handleSelectionChange" :default-sort = "{prop: 'createTime'}">
    <el-table-column type="selection" width="55" > </el-table-column>
    <el-table-column label="消息日期" sortable show-overflow-tooltip width="260" prop="createTime">
      <template slot-scope="scope">
        <span style="margin-left: 10px"><el-link icon="el-icon-time" :underline="false" >{{scope.row.createTime}}</el-link></span>
      </template>
    </el-table-column>
    <el-table-column prop="messageContent" label="内容" width="1000"></el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="totalnum" :page-size="pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page="currentpage" style="margin-top:30px;margin-left:20%"/>
  <el-button type="danger" plain style="margin-top: 10px;" @click="deletemessage">清除消息</el-button>
  </div>
  
</template>

<script>
 import axios from 'axios'
export default {
  data(){
    return{
    sefileid:[],
    tableData:[],
    totalnum:0,
    currentpage:1,  //当前所在页默认是第一页
    pagesize:8,  //每页显示多少行数据 默认设置为10
    list:[],
    }
  },
  methods:{
    handleSelectionChange(val){
      this.sefileid=[]
        this.multipleSelection = val;
        for (const key in this.multipleSelection) {
          this.sefileid[key] = this.multipleSelection[key].messageId
        }
    },
    getPageInfo(){
    //清空列表
    this.tableData = []
     // 获取当前页的数据
     for(let i=(this.currentpage-1)*this.pagesize;i<this.totalnum;i++){
        //把遍历的数据添加到pageTicket里面
        this.tableData.push(this.list[i]);
        //判断是否达到一页的要求
        if(this.tableData.length===this.pagesize) break;
      }
  },
  deletemessage(){
    this.$confirm('此操作将选择的所有消息永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get(`/api/deleteMessage?email=${localStorage.getItem("email")}&messageIds=${this.sefileid}`).then(
      response=>{
        if(response.data.code==200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          location.reload()
        }else{
          this.$message.error(response.data.message)
        }
      },
      error=>{
        this.$message.error("删除失败");
        console.log(error.$message)
      }
    )         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
  },
     //分页时修改每页的行数,这里会自动传入一个size
     handleSizeChange(size){
      //修改当前每页的数据行数
      this.pagesize=size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber){
      //修改当前的页码
      this.currentpage=pageNumber;
      //数据重新分页
      this.getPageInfo()
  },
  },
  mounted(){
    axios.get(`/api/getAllMessage?email=${localStorage.getItem("email")}`).then(
      response=>{
          if(response.data.code===200){
            this.list = response.data.data
          this.totalnum = this.list.length
            this.getPageInfo()
          }else{
            this.$message.error(response.data.message)
          }
      },
      error=>{
        this.$message.error("消息列表显示失败");
        console.log(error.$message)
      }
    )
  }
}
</script>

<style>

</style>